<template>
	<div class="flowcontainer">
		<div class="crumb">
			<span>当前位置：</span>
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
				<el-breadcrumb-item>出版常识</el-breadcrumb-item>

			</el-breadcrumb>
		</div>
		<div>
			<div class="left" style="margin-bottom:30px;">
				<div class="top">
					<p>新书展示</p>
				</div>
				<div class="newbookslist" @click="toNewBookPage">
					<BookItem v-for="(item, index) in bookList" :key="index" :bookItem="item"></BookItem>
				</div>

			</div>
			<div class="right" style="margin-bottom:30px;">
				<div>
					<div class="senselist" v-for="(item, index) in knowledgeList" :key="index"
						@click="toComDetail(item)">
						<!-- <router-link :to="{ path: '/detail', name: 'detail', params: item }">{{ item.title }}</router-link> -->
						<!-- <div class="leftimg"><img :src="item.image"/></div> -->
						<!-- <div class="leftimg"> <el-image style="width: 100px; height: 100px" :src="item.image"
								fit="fill"></el-image></div> -->
						<div class="rightdesc">
							
							<div class="sense-title"><span class="iconfont icon-book"></span>{{ item.title }}</div>
							<div class="sensecont">{{ item.publishtime }}</div>
						</div>
					</div>
				</div>
				<div class="block">
					<el-pagination :current-page="Kpage" :page-size="Klimit" :total="Ktotal"
						layout="total, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
						@current-change="pageCurrentChangeHandle">
					</el-pagination>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import BookItem from '@/components/BookItem/BookItem.vue'
export default {
	data() {
		return {
			bookList: [],
			knowledgeList: [],

			//获取新书接口的参数
			Border: 'asc', // 排序，asc／desc
			BorderField: 'levelid', // 排序，字段
			Bpage: 1, // 当前页码
			Blimit: 3, // 每页数
			Btotal: 0,
			//获取常识接口的参数
			Korder: 'desc', // 排序，asc／desc
			KorderField:'publishtime', //'orders', // 排序，字段
			Kpage: 1, // 当前页码
			Klimit: 30, // 每页数
			Ktotal: 0,
		}

	},
	methods: {
		// 获取新书
		getInfo() {
			this.$http.get(
				`/bookManagement/books/page?order=${this.Border}&orderField=${this.BorderField}&page=${this.Bpage}&limit=${this.Blimit}`
			).then((res) => {
				// console.log(res.data.data.list);
				this.bookList = res.data.data.list;
			}).catch(() => { })
		},

		//http://www.zwcbtsbk.com/renren-admin/bookManagement/knowledge/page?order=desc&orderField=publishtime&page=1&limit=30
		//获取常识
		getKnowledge() {
			this.$http.get(
				`/bookManagement/knowledge/page?order=${this.Korder}&orderField=${this.KorderField}&page=${this.Kpage}&limit=${this.Klimit}`
			).then((res) => {
				// console.log(res.data.data.list);
				this.Ktotal = res.data.data.total;
				this.knowledgeList = res.data.data.list;
			}).catch(() => { })
		},

		pageSizeChangeHandle(val) { },

		pageCurrentChangeHandle(val) {
			console.log(val);
			this.Kpage = val;
			this.knowledgeList = [];
			this.$http.get(
				`/bookManagement/knowledge/page?order=${this.Korder}&orderField=${this.KorderField}&page=${this.Kpage}&limit=${this.Klimit}`
			).then((res) => {
				console.log(res.data.data.list);
				this.Ktotal = res.data.data.total;
				this.knowledgeList = res.data.data.list;
			}).catch(() => { })
		},
		toComDetail(obj) {
			// console.log('11111');
			this.$router.push({
				path: '/detail',
				name: 'detail',
				params: obj
			});
			sessionStorage.setItem('comsenseDetail', JSON.stringify(obj));
		},
		toNewBookPage() {
			this.$router.push({
				path: '/newbook'
			});
		}
	},
	mounted() {
		this.getInfo();
		this.getKnowledge();
	},
	components: {
		BookItem
	}
}
</script>

<style scoped>
.flowcontainer {
	width: 100%;
	height: 100%;
	/* min-height: 1130px; */
	background: rgb(239, 242, 243);
}

.crumb {
	height: 50px;
	margin: 0 240px;
	display: flex;
	flex-direction: row;
	align-items: center;
}

.crumb span {
	color: rgb(3, 3, 3);
	font-family: PingFang SC;
	font-size: 18px !important;
	letter-spacing: 0px;
}

.flowcontainer>div:nth-child(2) {
	height: 100%;
	/* min-height: 1130px; */
	display: flex;
	flex-direction: row;
	margin: 0 240px;

}

.left {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.left p {
	color: rgb(0, 27, 39);
	font-family: PingFang SC;
	font-size: 22px;
	line-height: 22px;
	letter-spacing: 0px;
	text-align: left;
	margin: 0;
	padding: 0;
}

.left .top {
	height:100px;
	background-color: white;
	display: flex;
	justify-content: center;
	align-items: center;
	color: rgb(6, 63, 90);
	font-family: PingFang SC;
	font-size: 30px;
	line-height: 44px;
	letter-spacing: 0px;
	text-align: center;

}


.newbookslist {
	flex: 1;
	background-color: white;
	display: flex;
	flex-direction: column;
	/* overflow: scroll; */
	overflow: auto;



}

.newbookslist::-webkit-scrollbar {
	display: none;
}

.right {
	flex: 3;
	margin-left: 20px;
	background-color: white;
	display: flex;
	flex-direction: column;
	/* justify-content: space-between; */
	padding: 0 40px;
	overflow: auto;
}

.right::-webkit-scrollbar {
	display: none;
}

.right .senselist {
	/* height: 250px; */
	text-align: left;
	border-bottom: 1px solid rgb(239, 242, 243);
	margin-top: 20px;
	margin: 0;
	padding: 10px 0;

	color: rgb(0, 27, 39);
	font-family: PingFang SC;
	font-size: 20px;

	/* line-height: 22px; */
	letter-spacing: 0px;
	/* text-align: left; */
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}

.senselist:hover {
	cursor: pointer;
}

.leftimg {
	padding: 14px 17px;
	border-radius: 5px;
}

.leftimg img {
	width: 165px;
	height: 240px;
	box-shadow: 5px 5px 1px rgb(239, 242, 243);
}

.rightdesc {
	height: 100%;
	flex: 1;
	/* padding-left: 60px; */
	display: flex;
	flex-direction: row;
	justify-content: space-between;

}

.rightdesc .sense-title {
	/* font-weight: bold; */
	/* font-size: 30px; */
	color: rgb(0, 27, 39);
	font-family: PingFang SC;
	font-size: 20px;
	/* font-weight: undefined; */
	/* line-height: 22px; */
	letter-spacing: 0px;
	text-align: left;
}
.sense-title span{
	margin-right: 10px;
	color:#24797d;
}
.sense-title span:hover{
	font-size: 18px;
}

.rightdesc .sensecont {
	/* flex: 1; */
	/* text-indent: 2em; */
	/* padding-top: 10px; */
	font-size: 16px;
	display: flex;
	justify-content: center;
	align-items: center;
}


.right a {
	text-decoration: none;
	color: rgb(0, 27, 39);
	font-family: PingFang SC;
	font-size: 20px;

	line-height: 22px;
	letter-spacing: 0px;
	text-align: left;
}


.block {
	/* flex: 1; */
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 30px 0;
}
</style>

<style>
.el-breadcrumb__inner{
	font-size: 18px !important;
}
.el-breadcrumb__inner a:hover, .el-breadcrumb__inner.is-link:hover {
    color: #24797d;
}
.el-pagination .btn-next,
.el-pagination .btn-prev {
	padding: 0;
}

.el-pagination .btn-next .el-icon,
.el-pagination .btn-prev .el-icon {
	display: block;
	font-size: 0.0625rem;
	font-size: 30px;
	/* color:rgb(239, 242, 243); */
	color: lightgrey;
	/* font-weight: 700; */
}

.el-pager li {
	height: 35px;
	line-height: 35px;
}

.el-pager li:hover {
	color: rgb(5, 97, 54);
}

.el-pagination button {
	/* border: none; */
	/* padding: 0 0.03125rem; */
	background: 0 0;
	border: 1px solid lightgrey;
	border-radius: 5px;
	/* padding: 5px 0 10px 0; */
	width: 50px;
	height: 35px;
}

.el-pagination__jump {
	height: 35px;
	line-height: 35px;
}

.el-pager li.active {
	color: rgb(5, 97, 54);

}
</style>
